#characterDialog {
	cursor: default;
	-moz-user-select: none;
	-webkit-user-select: none;
	display: none;
	cursor: pointer;
	pointer-events: all;
	font-family:'GraphicPixel';        
}

#characterStrength,
#characterAgility,
#characterHealth,
#characterEnergy,
#characterLuck,
#characterPoints
{
	display:inline-block;
	color:white;
	text-shadow:
	-1px -1px 0 black,
	 0   -1px 0 black,
	 1px -1px 0 black,
	 1px  0        0 black,
	 1px  1px 0 black,
	 0    1px 0 black,
	-1px  1px 0 black,
	-1px  0        0 black;	
}

#characterName, #characterLevel, #characterAttackLevel,#characterDefenseLevel,#characterMoveLevel, #characterExp {
	text-shadow:
	-1px -1px 0 black,
	 0   -1px 0 black,
	 1px -1px 0 black,
	 1px  0        0 black,
	 1px  1px 0 black,
	 0    1px 0 black,
	-1px  1px 0 black,
	-1px  0        0 black;	

}
	
#charAddStrength,
#charAddAgility,
#charAddHealth,
#charAddEnergy,
#charAddLuck
{
	display:none;
	color:white;
	pointer-events: all;
}

#skillDetail
{
	text-shadow:
	-1px -1px 0 black,
	 0   -1px 0 black,
	 1px -1px 0 black,
	 1px  0        0 black,
	 1px  1px 0 black,
	 0    1px 0 black,
	-1px  1px 0 black,
	-1px  0        0 black;	

}

@media screen and (min-width: 1501px) {
	#armorColor {
		position:absolute;
		top:60px;
		left:24px;
	}
	#weaponColor {
		position:absolute;
		top:60px;
		right:24px;
	}
	
    /*#characterDialog {
        position: absolute;
        left: 50%;
        bottom: 0px;
        width: 532px;
        height: 444px;
        margin-left: -268px;
        cursor: default;
        -moz-user-select: none;
        -webkit-user-select: none;
        display: none;
        cursor: pointer;
        pointer-events: all;
        font-family:'GraphicPixel';        
    }

    #characterDialogFrame {
        position: absolute;
        left:27px;
        top: 42px;
        width: 478px;
        height: 390px;
    }*/
	
    #characterDialogFrameSkillPage, #characterDialogFrameStatPage
	{
        position: absolute;
        left: 2%;
        top: 2%;
        width: 96%;
        height: 96%;
        display: none;
    }

	#characterInfo {
        position: absolute;
        left: 2%;
        top: 2%;
        width: 48%;
		
	}
	
	#characterStats {
        position: absolute;
        left: 50%;
        top: 2%;
        width: 48%;
		
	}
	
    #skillDetail {
    	position: absolute;
    	left:0px;
    	top:8px;
    	width:90%;
    	height:20%;
    	font-family:'GraphicPixel';
    	font-size:18px;
    	font-weight: bold;
    	padding:5%;
    	color:#fff;
    }
       
    #characterName, #characterLevel, #characterAttackLevel,#characterDefenseLevel,#characterMoveLevel, #characterExp {
        position: relative;
        width: 200px;
        height: 48px;
        font-family: 'GraphicPixel';
        font-size: 21px;
        color:#fff;
    }
    
    #characterLook {
        position: absolute;
        left: 141px;
        top: 60% !important;
        width: 96px;
        height: 96px;
    }
    #changeLookArmorPrev, #changeLookArmorNext, #changeLookWeaponPrev, #changeLookWeaponNext {
    	position: absolute;
    	width:50px;
    	height:18px;
    	font-size:18px;
    	color: #fff;
    }
    #changeLookArmorPrev {
    	left:18px;
    	top:270px;
    }
    #changeLookArmorNext {
    	right:18px;
    	top:270px;
    }
    #changeLookWeaponPrev {
    	left:18px;
    	top:306px;
    }
    #changeLookWeaponNext {
    	right:18px;
    	top:306px;
    }

    #characterLookArmor, #characterLookWeapon {
        position: absolute;
        width: 100%;
        height: 100%;
        background-size: 480px;
        background-position: 0px -512px;
    }
    #characterLookShadow {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 48px;
        height: 48px;
        background-size: 48px;
        background-image: url('../img/3/shadow16.png');
    }

    #characterCloseButton {
	    position: absolute;
	    right: 3px;
	    top: 3px;
	    width: 32px;
	    height: 32px;
	    cursor: pointer;
	    z-index:15;
		background: url('../img/2/close-button.png' ) no-repeat;
	    pointer-events: all;
    } 
	

    #characterPoints {
    	font-size:21px;
    	width: 150px !important;
		padding:5%;
    }
	#characterStrength,
	#characterAgility,
	#characterHealth,
	#characterEnergy,
	#characterLuck
	
	{
		padding:5%;
		font-size:21px;
		width:150px !important;
	}
	
	#charAddStrength,
	#charAddAgility,
	#charAddHealth,
	#charAddEnergy,
	#charAddLuck
	{
		width:30px !important;
		height:30px !important;		
	}

}

@media screen and (max-width: 1500px), screen and (max-height: 870px) {
	#armorColor {
		position:absolute;
		top:48px;
		left: 18px;
	}
	#weaponColor {
		position:absolute;
		top:48px;
		right: 18px;
	}

    #characterDialogFrameSkillPage, #characterDialogFrameStatPage
	{
        position: absolute;
        left: 2%;
        top: 2%;
        width: 96%;
        height: 96%;
        display: none;
    }

	#characterInfo {
        position: absolute;
        width: 48%;
		left:0;
	}
	
	#characterStats {
        position: absolute;
        width: 48%;
		left:50%;
	}
	
    #skillDetail {
    	position: absolute;
    	left:0px;
    	top:8px;
    	width:90%;
    	height:20%;
    	font-family:'GraphicPixel';
    	font-size:18px;
    	font-weight: bold;
    	padding:5%;
    	color:#fff;
    }
       
    #characterName, #characterLevel, #characterAttackLevel,#characterDefenseLevel,#characterMoveLevel, #characterExp {
        width: 125px;
        height: 32px;
        font-family: 'GraphicPixel';
        font-size: 16px;
        color:#fff;
		padding:5%;
    }
    
    #characterLook {
        position: absolute;
        left: 141px;
        top: 60% !important;
        width: 96px;
        height: 96px;
    }
    #changeLookArmorPrev, #changeLookArmorNext, #changeLookWeaponPrev, #changeLookWeaponNext {
    	position: absolute;
    	width:50px;
    	height:18px;
    	font-size:18px;
    	color: #fff;
    }
    #changeLookArmorPrev {
    	left:18px;
    	top:270px;
    }
    #changeLookArmorNext {
    	right:18px;
    	top:270px;
    }
    #changeLookWeaponPrev {
    	left:18px;
    	top:306px;
    }
    #changeLookWeaponNext {
    	right:18px;
    	top:306px;
    }

    #characterLookArmor, #characterLookWeapon {
        position: absolute;
        width: 100%;
        height: 100%;
        background-size: 480px;
        background-position: 0px -512px;
    }
    #characterLookShadow {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 48px;
        height: 48px;
        background-size: 48px;
        background-image: url('../img/3/shadow16.png');
    }

    #characterPoints {
		margin-top:6px;
		margin-bottom:6px;
    	font-family:"GraphicPixel";
		font-size:16px;
		padding:5%;
    	width: 120px !important;		
    }
	#characterStrength,
	#characterAgility,
	#characterHealth,
	#characterEnergy,
	#characterLuck
	
	{
		font-family:"GraphicPixel";
		font-size:16px;
		padding:5%;
		width:120px !important;
	}
	
	#charAddStrength,
	#charAddAgility,
	#charAddHealth,
	#charAddEnergy,
	#charAddLuck
	{
		width:24px !important;
		height:24px !important;
		
	}
}

@media screen and (max-width: 1000px) {
	#armorColor {
		position:absolute;
		top:24px;
		left: 12px;
		width:32px;
		height:16px;
		font-size:6px;
	}
	#weaponColor {
		position:absolute;
		top:24px;
		right:12px;
		width:32px;
		height:16px;
		font-size:6px;
	}
	
    #characterDialogFrameSkillPage, #characterDialogFrameStatPage
	{
        position: absolute;
        left: 2%;
        top: 2%;
        width: 96%;
        height: 96%;
        display: none;
    }

	#characterInfo {
        position: absolute;
        width: 48%;
		left:0;
	}
	
	#characterStats {
        position: absolute;
        width: 48%;
		left:50%;
	}

    #skillDetail {
    	position: absolute;
    	left:0px;
    	top:2px;
    	width:90%;
    	height:25%;
    	font-family:'GraphicPixel';
    	font-size:6px;
    	font-weight: bold;
    	padding:5%;
    	color:#fff;
    }
       
    #characterName, #characterLevel, #characterAttackLevel, #characterDefenseLevel, #characterMoveLevel {
        position: absolute;
        width: 86px;
        height: 10px;
        font-family: 'GraphicPixel';
        font-size: 9px;
        color: #fff;
    }
    #characterName {
        left: 0;
        top: 20px;
    }
    #characterLevel {
        left: 0;
        top: 38px;
    }
    #characterAttackLevel {
        left: 0;
        top: 56px;
    }
    #characterDefenseLevel {
        left: 0;
        top: 74px;
    }
    #characterMoveLevel {
        left: 0;
        top: 92px;
    }
    
    #characterLook {
        position: absolute;
        left: 48px;
        top: 60% !important;
        width: 31px;
        height: 31px;
    }
    #changeLookArmorPrev, #changeLookArmorNext, #changeLookWeaponPrev, #changeLookWeaponNext {
    	position: absolute;
    	width:18px;
    	height:6px;
    	font-size:6px;
    	color: #fff;
    }
    #changeLookArmorPrev {
    	left:6px;
    	top:90px;
    }
    #changeLookArmorNext {
    	right:6px;
    	top:90px;
    }
    #changeLookWeaponPrev {
    	left:6px;
    	top:102px;
    }
    #changeLookWeaponNext {
    	right:6px;
    	top:102px;
    }
       
    #characterLookArmor, #characterLookWeapon {
        position: absolute;
        width: 100%;
        height: 100%;
        background-size: 161px;
        background-position: 0px -171px;
    }
    #characterLookShadow {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 16px;
        height: 16px;
        background-size: 16px;
        background-image: url('../img/1/shadow16.png');
    }
    
    #characterPoints {
		margin:0;
		padding:0;
		font-size:8px;
		font-weight: bold;
    	width: 100px !important;
    	line-height:8px;
    }
	#characterStrength,
	#characterAgility,
	#characterHealth,
	#characterEnergy,
	#characterLuck
	
	{
		margin:0;
		padding:0;
		font-size:8px;
		font-weight: bold;
		width:65px !important;
		vertical-align: bottom;
		line-height:8px;
	}
	
	#charAddStrength,
	#charAddAgility,
	#charAddHealth,
	#charAddEnergy,
	#charAddLuck
	{
		margin:0;
		padding:0;		
		width:8px !important;
		height:8px !important;
		font-size:6px;
		font-weight: bold;
		vertical-align: bottom;
	}          
}
